<!--
 * @Author: 梁卓
 * @Date: 2022-02-13 21:10:45
 * @LastEditTime: 2022-03-07 16:45:40
 * @LastEditors: Please set LastEditors
 * @Description: 每学期入党指标
 * @FilePath: \dreamUi\src\views\activist\Political.vue
-->
<template>
  <div>
    <div style="margin-top: 3%; margin-bottom: 3%">
      <el-col :span="4">
        <el-select v-model="semester" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.semester"
            :value="item.semester"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getInfo">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="insert">添加指标</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="updata">修改指标</el-button>
      </el-col>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>各年级该学期的入党要求({{ textData.semester }})</span>
      </div>
      <div>
        <ul class="text_class">
          <li>大一入党要求: {{ textData.quotaFirst }}</li>
          <el-divider></el-divider>
          <li>大二入党要求: {{ textData.quotaSecond }}</li>
          <el-divider></el-divider>
          <li>大三入党要求: {{ textData.quotaThirst }}</li>
          <el-divider></el-divider>
          <li>大四入党要求: {{ textData.quotaFourth }}</li>
        </ul>
      </div>
    </el-card>
    <!-- 入党指标的修改 -->
    <el-dialog :title="title" :visible.sync="open" width="35%" @closed="dialogClose" >
      <el-form :model="form" ref="form" :rules="rule">
        <el-form-item label="学期" prop="semester">
          <el-input autosize placeholder="请输入学期(如：2021-2022)" v-model="form.semester" />
        </el-form-item>
        <el-form-item label="大一入党要求" prop="quotaFirst">
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="form.quotaFirst" />
        </el-form-item>
        <el-form-item type="textarea" autosize placeholder="请输入内容" label="大二入党要求" prop="quotaSecond" >
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="form.quotaSecond" />
        </el-form-item>
        <el-form-item label="大三入党要求" prop="quotaThirst">
          <el-input v-model="form.quotaThirst" />
        </el-form-item>
        <el-form-item label="大四入党要求" prop="quotaFourth">
          <el-input type="textarea" autosize  placeholder="请输入内容" v-model="form.quotaFourth" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFrom">取 消</el-button>
        <el-button type="primary" @click="updateInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Political',

  data() {
    return {
      semester: '2021-2022',
      options: [],
      textData: {},
      form: {},
      title: '',
      // 是否打开对话框
      open: false,
      rule: {
        semester: [
          {required: true, message: '请输入学期', trigger: 'blur'},
          {message: '长度为9', trigger: 'blur'}
        ],
        quotaFirst: [
          {required: true, message: '请输入大一入党要求', trigger: 'blur'},
          {min: 1, max: 355, message: '长度为1~355之间', trigger: 'blur'}
        ],
        quotaSecond: [
          {required: true, message: '请输入大二入党要求', trigger: 'blur'},
          {min: 1, max: 355, message: '长度为1~355之间', trigger: 'blur'}
        ],
        quotaThirst: [
          {required: true, message: '请输入大三入党要求', trigger: 'blur'},
          {min: 1, max: 355, message: '长度为1~355之间', trigger: 'blur'}
        ],
        quotaFourth: [
          {required: true, message: '请输入大四入党要求', trigger: 'blur'},
          {min: 1, max: 355, message: '长度为1~355之间', trigger: 'blur'}
        ]
      }
    };
  },

  mounted() {
    this.getInfo()
    this.getAllSemester()
  },

  methods: {
    // 获取入党信息
    getInfo() {
      this.$ajax.get(`/political/${this.semester}`).then(res => {
        this.textData = res.data.data[0];
        // this.form = res.data.data[0]
      })
    },
    // 获取学期信息
    getAllSemester() {
      this.$ajax.get('/political/getSemesters').then(res => {
        this.options = res.data.data
      })
    },
    // 更新入党要求
    updateInfo() {
      if (this.title === '添加入党要求') {
        this.$refs.form.validate(val => {
          // 校验不同通过
          if (!val) {
            return this.$message.error('表单校验不通过，请检查后提交')
          }
          this.$ajax.post('/political/',this.form).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
              this.open = false;
              this.getInfo();
            }
          }, error => {
            this.$message.error(res.data.message);
          });
          
        });
        
      }
      if (this.title === '修改入党要求') {
          this.$refs.form.validate(val => {
          // 校验不同通过
          if (!val) {
            return this.$message.error('表单校验不通过，请检查后提交')
          }
          this.$ajax.put('/political/',this.form).then(res => {
            this.$message.success(res.data.message);
              this.open = false;
              this.getInfo();
          });
        })
      }
    },
    // 添加按钮事件
    updata(param) {
      this.title = '修改入党要求';
      this.open = true;
      this.form = {}
      this.form = this.textData;
    },
    insert() {
      this.title = '添加入党要求';
      this.open = true;
      this.form = {}
    },
    // 关闭对话框事件
    dialogClose() {
      // 将整个表单进行重置
      this.$refs.form.resetFields();
      this.getInfo()
    },
    // 点击取消对话框
    closeFrom() {
      this.form = {},
      this.open = false
      this.getInfo()
    },
  },
};
</script>

<style scoped>
.item {
  margin-top: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.text_class {
  text-align: left;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 20px;
}
</style>
